<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleAddSubmit" :form="form">
        <a-form-item
          label="商品"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['goodId', { rules: [{ required: true, message: '请选择' }] }]" placeholder="请选择" @change="handleChange">
            <a-select-option :value="i.goodId" v-for="i in goodsoption" :key="i.goodId">{{ i.goodName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="库存数量"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input
            style="width: 100%"
            v-model="count"
            disabled
          />
        </a-form-item>
        <a-form-item
          label="单品成本"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input
            style="width: 100%"
            v-model="price"
            disabled
          />
        </a-form-item>
        <a-form-item
          label="出库数量"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input-number
            style="width: 100%"
            v-decorator="['count', { rules: [{ required: true, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item
          label="出库价格"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input-number
            style="width: 100%"
            v-decorator="['outPrice', { rules: [{ required: true, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" icon="check">添加</a-button>
          <!-- <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button> -->
        </a-form-item>
      </a-form>
    </a-card>
    <a-card :body-style="{ padding: '24px 32px' }" title="出库商品清单">
      <a-table size="default" rowKey="key" :columns="columns" :data-source="loadData">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <!-- <a-tag color="#428BCA" @click="handleEdit(record)">编辑</a-tag> -->
            <a-tag color="#D15B47" @click="handleDel(record)">删除</a-tag>
          </template>
        </span>
        <span slot="total" slot-scope="text, record">
          {{ Number(record?.count) * Number(record.outPrice) }}
        </span>
      </a-table>
    </a-card>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="submitform">
        <a-form-item
          label="经销商"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['supplyId', { rules: [{ required: true, message: '请选择经销商' }] }]" placeholder="请选择供应商">
            <a-select-option :value="i.id" v-for="i in supplyoption" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="销售业务"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['empId', { rules: [{ required: true, message: '请选择销售业务' }] }]" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in useroption" :key="i.id">{{ i.userName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="出库日期"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-date-picker v-decorator="['outDate',{ initialValue:this.toDays, rules: [{ required: true, message: '请选择' }]}]" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" icon="check">提交出库</a-button>
          <!-- <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button> -->
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { addWholesaleAbundanceUsingPOST, getGoodsListUsingGET1 } from '@/api/api/pifayewu.ts'
import { getEmployeesListUsingPOST } from '@/api/api/yuangongguanli.ts'
import { getSuppliesListUsingPOST } from '@/api/api/jingxiaoshangyunyingshangguanli.ts'
import moment from 'moment'
export default {
  name: 'WholesaleSellShopLarge',
  components: {
  },
  data() {
    return {
      form: this.$form.createForm(this),
      submitform: this.$form.createForm(this),
      value:'',
      toDays: moment().format('YYYY-MM-DD'),
      columns: [
        {
          title: '商品',
          dataIndex: 'goodName',
        },
        {
          title: '数量',
          dataIndex: 'count',
        },
        {
          title: '单品成本(元)',
          dataIndex: 'commCost',
        },
        {
          title: '出库单价(元)',
          dataIndex: 'outPrice',
        },
        {
          title: '出库合计(元)',
          dataIndex: 'total',
          scopedSlots: { customRender: 'total' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      count:'',
      price:'',
      // 加载数据方法 必须为 Promise 对象
      loadData: [],
      goodsoption: [],
      supplyoption: [],
      useroption: [],
      optionParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
    }
  },
  mounted() {
    this.getGoodsOption()
    this.getSupOption()
    this.getUserOption()
  },
  methods: {
    handleDel(record) {
      const that = this
      that.$confirm({
        title: '删除',
        content: '你确定要删除这个商品吗？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.loadData.splice(
            that.loadData.findIndex((item) => item.id === record.id),
            1
          )
          // this.loadData = this.loadData
        },
      })
    },
    handleSearch(value) {
      this.getGoodsOption(value)
    },
    handleChange(value) {
      this.price = this.goodsoption.find((item) => {
        return item.goodId == value
      }).price
      this.count = this.goodsoption.find((item) => {
        return item.goodId == value
      }).count
    },
    getGoodsOption() {
      getGoodsListUsingGET1({...this.optionParam,storeId: this.$route.params.id})
        .then((res) => {
          this.goodsoption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    getSupOption() {
      getSuppliesListUsingPOST({ ...this.optionParam, typesList: '2,3' })
        .then((res) => {
          this.supplyoption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    getUserOption() {
      getEmployeesListUsingPOST(this.optionParam)
        .then((res) => {
          this.useroption = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleAddSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if(Number(values.count) > Number(this.count)){
            this.$message.error('出库数量不能超过库存数量,请重新输入')
            return false
          }
          if(Number(values.count) <= 0){
            this.$message.error('出库数量不能小于0,请重新输入')
            return false
          }
          this.loadData.push({
            ...values,
            outPrice:values.outPrice,
            commCost: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).price,
            inventoryId:this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).inventoryId,
            phoneCode1: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).phoneCode1,
            goodName: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).goodName,
            phoneCode1: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).phoneCode1,
            phoneCode2: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).phoneCode2,
            supplyName: this.goodsoption.find((item) => {
              return item.goodId == values.goodId
            }).supplyName,
          })
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.submitform.validateFields((err, values) => {
        if (!err) {
          if(this.loadData.length == 0) {
            this.$message.error('没有可出库的商品')
            return false
          }
          const data = this.loadData.map((item) => {
            return {
              ...item
            }
          })
          addWholesaleAbundanceUsingPOST(
            {
              ...values,
              outDate: values?.outDate,
              storeId: this.$route.params.id,
            },
            [...data]
          )
            .then((res) => {
              this.$message.success('操作成功')
              this.$router.push({ path: `/wholesale/sellrecord/detail/${res.data.id}` })
              // 重置表单数据
              this.form.resetFields()
              this.submitform.resetFields()
            })
            .catch((error) => {
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
  resetSearchForm() {
    this.queryParam = {
      date: moment(new Date()),
    }
  },
}
</script>
